/**
 * Created by Adi(adi@imeth.cn) on 2018/9/12.
 */
import React from 'react';
import { autobind } from 'core-decorators';
import {
  Upload,
  Icon,
  Modal,
  message,
} from 'antd';
import PropTypes from 'prop-types';


@autobind
class UploadFile extends React.Component {

  static propTypes = {
    name: PropTypes.string,  // 发到后台的文件参数名
    beforeUpload: PropTypes.func,   // 上传文件之前的钩子，参数为上传的文件，若返回 false 则停止上传
    defaultFileList: PropTypes.object, // 默认已经上传的文件列表
    headers: PropTypes.object,  // 设置上传的请求头部，IE10 以上有效
    multiple: PropTypes.bool,   // 	是否支持多选文件，ie10+ 支持。开启后按住 ctrl 可选择多个文件。
    listType: PropTypes.string,  // 上传列表的内建样式，支持三种基本样式 text, picture 和 picture-card
    isSingle: PropTypes.bool,    // 是否一次上传一张
    onChange: PropTypes.func,    // 选择图片
  };

  static defaultProps = {
    name: 'file',
    multiple: false,
    listType: 'picture',
    isSingle: true,
  };

  constructor(props) {
    super(props);
    this.state = {
      previewVisible: false,
      previewImage: '',
      fileList: [],
    };
  }


  render() {
    let { name, multiple, listType, isSingle } = this.props;
    const { previewVisible, previewImage, fileList } = this.state;
    const uploadButton = (
      <div>
        <Icon type="plus" style={{ fontSize: '32px', marginTop: '10px', color: '#999' }}/>
        <div style={{ marginTop: '5px' }}>Upload</div>
      </div>
    );
    listType = 'picture-card';
    return (
      <div>
        <Upload
          name={name}
          multiple={multiple}
          listType={listType}
          onChange={this._onFileChange}
          onPreview={this._onPreview}
          beforeUpload={this._beforeUpload}
        >
          {isSingle && fileList.length >= 1 ? null : uploadButton}
        </Upload>
        <Modal visible={previewVisible} footer={null} onCancel={this._onModelCancel}>
          <img alt="example" style={{ width: '100%' }} src={previewImage}/>
        </Modal>
      </div>
    );
  }

  // 上传图片
  _onFileChange({ file, fileList, event }) {
    console.info('file', file);
    console.info('fileList', fileList);
    // let fList = this.convertBase64UrlToBlob(fileList[0].thumbUrl);
    let { onChange } = this.props;
    onChange && onChange(file.originFileObj);
    this.setState({ fileList });
  }

  // convertBase64UrlToBlob(urlData) {
  //   const bytes = window.atob(urlData.split(',')[1]);
  //   // 去掉url的头，并转换为byte   // 处理异常,将ascii码小于0的转换为大于0
  //   const ab = new ArrayBuffer(bytes.length);
  //   const ia = new Uint8Array(ab);
  //   for (let i = 0; i < bytes.length; i++) {
  //     ia[i] = bytes.charCodeAt(i);
  //   }
  //   return new Blob([ab], { type: 'image/png' });
  // }

  // 预览图片
  _onPreview(file) {
    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  }

  // 取消预览框
  _onModelCancel() {
    this.setState({ previewVisible: false });
  }

  // 上传文件前钩子
  _beforeUpload(file) {
    let { beforeUpload } = this.props;
    let beforeState = true;
    if (beforeUpload) {
      beforeState = beforeUpload(file);
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('上传的图片需小于2M');
    }
    return isLt2M && beforeState;
  }
}


export default UploadFile;
